<template>
  <div id="samplesample">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="客户姓名" prop="cName">
        <el-input v-model="form.cName" placeholder="请输入客户姓名" style="width: 260px"></el-input>
      </el-form-item>

      <el-row>
        <el-col span='8'>
          <el-form-item label="预估价格" prop="estimate">
            <el-input type="number" v-model="form.estimate" placeholder="请输入预估价格" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
        <el-col span='8'>
          <el-form-item label="预计完成" prop="endTime"> 
            <el-date-picker
              style="width: 260px"
              v-model="form.endTime"
              type="datetime"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span='8'>
          <el-form-item label="产品类型" prop="devType">
            <el-select v-model="form.devType" placeholder="请选择" style="width: 260px">
              <el-option label="台式机" value="1"></el-option>
              <el-option label="笔记本" value="2"></el-option>
              <el-option label="投影仪" value="3"></el-option>
              <el-option label="打印机" value="4"></el-option>
              <el-option label="其他" value="5"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span='8'>
          <el-form-item label="机器品牌" prop="devBrand">
            <el-input v-model="form.devBrand" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span='8'>
          <el-form-item label="机器型号" prop="devMix">
            <el-input v-model="form.devMix" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
        <el-col span='8'>
          <el-form-item label="系列号" prop="series">
            <el-input v-model="form.series" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col span='8'>
          <el-form-item label="故障类型" prop="faultType">
            <el-select style="width: 260px" v-model="form.faultType" placeholder="请选择">
              <el-option label="固定性故障" value="1"></el-option>
              <el-option label="间歇性故障" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span='8'>
          <el-form-item label="故障现象" prop="faultDepression">
            <el-input v-model="form.faultDepression" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col span='8'>
          <el-form-item label="开机口令" prop="password">
            <el-input v-model="form.password" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span='8'>
          <el-form-item label="缺少零件" prop="lackPart">
            <el-input v-model="form.lackPart" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import RichText from '@/components/RichText/RichText'
import {addService} from '../../api/repair'
import {setMap} from '../../utils/dataStorage'
export default {
  data() {
    return {
      form: {
        cName: "",
        estimate: "",
        endTime: "",
        devType: "",
        devBrand: "",
        lackPart: "",
        password: "",
        faultDepression: "",
        faultType: "",
        series: "",
        devMix: ""
      },
      rules: {
        cName: [
          { required: true, message: "请输入客户姓名", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2~50个字符", trigger: "blur" }
        ],
        faultType: [
          { required: true, message: "请选择故障类型", trigger: "change" }
        ],
        endTime: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        devType: [
          { required: true, message: "请选择产品类型", trigger: "blur" }
        ],
        estimate: [
          { required: true, message: "请输入预估价格", trigger: "blur" }
        ],
        devBrand: [
          { required: true, message: "请输入机器品牌", trigger: "blur" }
        ],
        devMix: [
          { required: true, message: "请输入机器型号", trigger: "blur" }
        ],
        faultDepression: [
          { required: true, message: "请输入错误描述", trigger: "blur" }
        ],
        password: [
          {
            required: true,
            message: "请输入口令，若没有请输入‘无’",
            trigger: "blur"
          }
        ],
        lackPart: [
          { required: true, message: "请输入缺少的零件", trigger: "blur" }
        ],
        series: [
            { required: true, message: "请输入系列号", trigger: "blur"}
        ]
      },
      checkedCities: []
    };
  },
  components: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 设置提交的参数
          let param = new URLSearchParams();
          param.append("cName", this.form.cName);
          param.append("estimate", this.form.estimate);
          param.append("devType", this.form.devType);
          let time = this.form.endTime
          let year = time.getFullYear();
          let month = time.getMonth()+1;
          let day = time.getDate();
          let h = time.getHours();
          let m = time.getMinutes();
          let s = time.getSeconds();
          time = year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s;
          param.append("endTime",time);
          param.append("devBrand",this.form.devBrand);
          param.append("lackPart",this.form.lackPart);
          param.append("password",this.form.password);
          param.append("faultDepression",this.form.faultDepression);
          param.append("faultType",this.form.faultType);
          param.append("series",this.form.series);
          param.append("devMix",this.form.devMix);
          addService(param).then(r=>{
            setMap("sId", r);
            this.$router.push({path: '/service_sure'});
          }).catch(_=>{
              console.log(r);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    }
  }
};
</script>